<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>

<link href="<c:url value='/insdep/reset.min.css' />" rel="stylesheet" type="text/css">
<link href="<c:url value='/insdep/easyui_full.css'/>" rel="stylesheet" type="text/css">
<link href="<c:url value='/insdep/icon.css'/>" rel="stylesheet" type="text/css">
<script type="text/javascript" src="<c:url value='/insdep/jquery-1.11.3.min.js'/>"></script>
<script type="text/javascript" src="<c:url value='/insdep/jquery.easyui-1.5.2.min.js'/>"></script>
<script type="text/javascript" src="<c:url value='/insdep/insdep-extend.min.js'/>"></script>
<script type="text/javascript" src="<c:url value='/js/echarts.js'/>"></script>
</head>
<body>
<script type="text/javascript">
$(function(){
	//按条件查询用户
	 $("#queryer").linkbutton({onClick:function(){ 
		 $('#tj_from').form('submit', {   
			    success:function(data){    //表单查询数据刷新DataGrid
			    	var resultData = $.parseJSON(data);  
			    	myChart.setOption({
		                series: [{
		                    data: resultData
		                }]
		            });
			    }    
			}); 
	 }});
			$('#com_emp').combobox({
				editable : false,
				labelAlign : 'right',
				label : '员工姓名：',
				url : 'findAll_emp',
				valueField : 'empId',
				textField : 'empName'
			});
	 
})
</script>

<div class="easyui-layout theme-layout" data-options="fit:true">
    <div class="theme-header-layout" style="height:70px;border: 0px solid red" data-options="region:'north'">
    	<div style="margin-left: 3%;width:80%;margin-right:5%;margin-top:20px;border: 0px solid green">
        <form action="CountAttendanceInfo" id="tj_from" class="searcher-form" method="post">
    		<!-- <input id="empName" name="empName" class="easyui-textbox"  style="width: 30%;"  labelAlign="right" label="姓名：" labelWidth="150px">  -->
			<!--employ_dept 录用部门   -->
			<input name="empId" id="com_emp"   style="width: 30%;" labelWidth="110px">
			<a id="queryer"  class="easyui-linkbutton button-line-blue" 
			style="width: 9%;height: 30px;margin-left: 9%;"><i class="iconfont icon-roundcheck"></i>查询</a>
    		<a id="reset_un"  class="easyui-linkbutton button-line-blue return" 
			style="width: 9%;height: 30px;margin-left: 9%;"><i class="iconfont icon-refresh"></i>重置</a>
    	</form>
    	</div>
    </div>
   <div class="theme-center-layout" style="border: 0px solid red" data-options="region:'center',title:'考情统计图'">
				<!-- 饼状图数据 -->
			    <div id="pieChart" style="width:48%;height:400px;border: 0px solid #ccc;float: left;margin-left:10px;"></div>
				<div id="histogram" style="width:48%;height:400px;border: 0px solid #ccc;float: left;margin-left:30px;"></div>
			</div>
    
     <!-- 饼状图 -->
	    <script type="text/javascript">
	        // 基于准备好的dom，初始化echarts实例
	        var myChart = echarts.init(document.getElementById('pieChart'));
	
	        // 指定图表的配置项和数据
	        var option = {
								title : {
									text : '上班打卡考情统计',
									subtext : 'OAProject',
									x : 'center'
								},
								tooltip : {
									trigger : 'item',
									formatter : "{a} <br/>{b} : {c} ({d}%)"
								},
								legend : {
									orient : 'vertical',
									left : 'left',
									data : [
							            ].sort(function (a, b) { return a.value - b.value; }),
								},
								series : [ {
									name : '打卡类型--次数',
									type : 'pie',
									radius : '55%',
									center : [ '50%', '60%' ],
									data:[
							            ].sort(function (a, b) { return a.value - b.value; }),
					
							            itemStyle : {
										emphasis : {
											shadowBlur : 10,
											shadowOffsetX : 0,
											shadowColor : 'rgba(0, 0, 0, 0.5)'
										}
									}
								} ]
							};
	        
	     
	     // 异步加载数据
	        $.get('CountAttendanceInfo').done(function (data) {
	            // 填入数据
	            myChart.setOption({
	                series: [{
	                    data: data
	                }]
	            });
	        });
	
	        // 使用刚指定的配置项和数据显示图表。
	        myChart.setOption(option);
	    </script>
	    
	    <script type="text/javascript">
	        // 基于准备好的dom，初始化echarts实例
	        var histogram = echarts.init(document.getElementById('histogram'));
	        histogram.clear();
	        // 指定图表的配置项和数据
	      //  app.title = '堆叠柱状图';
	     // 异步加载数据
	         $.get('countDeptEmpInfo').done(function (data) {
	        	 var option = {
						color : [ '#FECEC4' ],
						title : {
							text : '部门人数统计',
							subtext : 'OAProject',
							x : 'center'
						},

						tooltip : {
							trigger : 'item',
							axisPointer : { // 坐标轴指示器，坐标轴触发有效
								type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
							}
						},
						grid : {
							left : '3%',
							right : '4%',
							bottom : '3%',
							containLabel : true
						},

						xAxis : [ {
							type : 'category',
							data :data.names
						/* "人事部","市场部","总经办","财务部","采购部" */
							/* [ '纪梵希', '彩妆', '香氛', '洗护', '美容工具', '男性护肤', '母婴', '保健食品' ] */ ,
							axisTick : {
								alignWithLabel : true
							}
						} ],

						yAxis : [ {
							type : 'value'
						} ],

						series : [ {
							name : '总人数',
							type : 'bar',
							barWidth : '60%',
							data : data.values
						/* [ "11", "52", "200", 334, 390, 330, 220, 220 ]  */
						} ]

					};
	        	 histogram.setOption(option);
	        });  
	         
	
	        // 使用刚指定的配置项和数据显示图表。
	       
	    </script>
	    

</div>

</body>
</html>